<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
          <Aside @header_title="header_title" :active_value="active_value" ></Aside>
        </el-aside>
      <el-container>
        <el-header>
        <Header :title1="title1" @set_value="set_value"></Header>
      </el-header>
      
        <el-main>
          <el-card  style="margin-bottom: 20px;height: 60px;" v-if="indexs!=1 && indexs!=6">
            <Search :search_content="search_content" @search="search" ref="search_1"></Search>
          </el-card>
          <el-card class="box-card">
            <router-view @getSearchContent="getSearchContent" :search_content=data1></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Header from '../components/Header.vue'
import Aside from '../components/Aside.vue'
import Search from '@/components/Search.vue';
import {ref,reactive} from "vue";

import { useRoute } from 'vue-router'
import { time } from 'echarts';


const route=useRoute();
const data=["首页","分类管理","商品管理","用户管理","角色管理","个人中心"]
const title1=ref();
const active_value=ref()
const indexs =ref()
const data1=reactive({
  search:'',
  selected:''
})
const search_1=ref()
const search_content=reactive({
  index1:'',
  select:'',
  select_data:[]
})
title1.value=route.meta.title
indexs.value=route.meta.index
const header_title=(val)=>{
  active_value.value=undefined
  title1.value=data[val-1]
  indexs.value=val
  search_1.value.btnCancel()
}
const set_value=(val)=>{
  active_value.value=val;
}
const getSearchContent=(val1,val2,val3)=>{
  search_content.index1=val1;
  search_content.select=val2;
  search_content.select_data=val3;
}
const search=(form)=>{
  data1.search=form.search;
  data1.selected=form.selected;
}

</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
  .el-header {
    text-align: center;
    line-height: 60px;
    color: #333;
  }
  .el-aside {
    width: 150px;
    color: #333;
    background:#303133
  }
  .el-main {
    height: 100vh;
    background-color: #e9eef3;
    color: #333;
  }
}

</style>
